<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			添加角色
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						唯一标识
					</view>
					<u-form-item prop="role_id" :border-bottom="false">
						<u-input class="u-form-input" :disabled="isAdmin" v-model="form.role_id" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						角色名称
					</view>
					<u-form-item prop="role_name" :border-bottom="false">
						<u-input class="u-form-input" @blur="blurTitle" v-model="form.role_name" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						角色权限
					</view>
					<u-form-item prop="permission" :border-bottom="false">
						<u-checkbox-group  @change="changePower" >
							<u-checkbox v-model="item.checked" v-for="(item, index) in menus" :key="index" :name="item._id"
								:disabled="item.disabled"
							>
								{{ item.title }}
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						备注
					</view>
					<u-form-item prop="comment" :border-bottom="false">
						<u-input class="u-form-input" @blur="blurTitle" v-model="form.comment" style="margin:0" />
					</u-form-item>
				</view>
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
		
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import {rules} from "/common/js_file/roles.js" ;
	const global = uniCloud.importObject("global",{customUI:true});
	const Roles = uniCloud.importObject("roles",{customUI:true});
	export default {
		data() {
			let form = {
				"role_id":'',
				"role_name":'',
				"permission":[],
				"comment":'',
			}
			return {
				form,
				loading:false,
				rules,
				menus:[],
				roleId:'',
				isAdmin:false
			};
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,
					position:'top',url: '/pages/system/city/city'
				})
			}
			this.getMenuData();
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.update( this.form );
					} else {
						
					}
				});
			},
			async update(form){
				if(this.roleId != form.role_id){
					const isRoleId = await Roles.isRoleId(form.role_id);
					if(isRoleId)  return this.$refs.uToast.show({title:'唯一索引已存在',type: 'error',duration:1500,position:'top' });
				}
				this.loading =  true;
				Roles.updateData(form,{_id:this.uid}).then(result =>  {
					if(result.code == 200){
						this.$refs.uToast.show({title:result.message,type: 'success',duration:1500,position:'top',
							callback:()=>{
								uni.navigateTo({url:'/pages/system/roles/roles'})
							}
						})
					}else{
						this.$refs.uToast.show({title:result.message,type: 'error',duration:1500,position:'top' })
					}
					return this.loading =  false;
				})
			},
			getData(){
				this.loading = true;
				let field = "_id,role_name,role_id,permission,comment,create_date";
				global.getOne('roles',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.form = data;
					this.roleId = data.role_id;
					if(this.form.role_id == 'admin') return this.isAdmin = true;
				})
			},
			// 获取权限菜单
			getMenuData(){
				const Menu = uniCloud.importObject("menu",{customUI:true});
				Menu.getMenuListStructure().then(result => {
					this.menus = result.result.map( item => {
						for (let i = 0; i < this.form.permission.length; i++) {
							if(item._id == this.form.permission[i]){
								item.checked = true ;
								if(this.isAdmin){
									item.disabled = true ;
								}
							}
						}
						return item;
					} );
					this.loading = false;
				})
			},
			// 选择权限菜单
			changePower(val){
				this.form.permission = val;
			},
			goUrl(Url){
				uni.navigateTo({url:Url})
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.body{
		width: 50%;
	}
</style>
